<script setup>
import {computed} from "vue"

const emits = defineEmits(['update:modelValue', 'change'])
const props = defineProps({
  modelValue: {
    type: String,
    default: ''
  },
  placeholder: {
    type: String,
    default: ''
  }
})

const middleman = computed({
  get() {
    return props.modelValue
  },
  set(val) {
    emits('update:modelValue', val)
  }
})
</script>

<template>
  <div>
    <input v-model="middleman" type="text" :placeholder="props.placeholder" @change="$emit('change')">
    <span class="bottom"></span>
    <span class="search-right"></span>
    <span class="top"></span>
    <span class="search-left"></span>
  </div>
</template>

<style scoped>
div {
  position: relative;
}

input {
  text-align: center;
  width: calc(100% - .9em - 4px);
  color: black;
  font-size: inherit;
  font-family: inherit;
  background-color: rgba(0, 0, 0, .025);
  padding: 0.35em 0.45em;
  border: 2px solid transparent;
  transition: background-color 0.3s ease-in-out;
}

input:focus {
  outline: none;
}

input::placeholder {
  color: #2e3055;
}

span {
  position: absolute;
  background-color: #2e3055;
  transition: transform 0.5s ease;
}

.bottom,
.top {
  height: 2px;
  left: 0;
  right: 0;
  transform: scaleX(0);
}

.search-left,
.search-right {
  width: 2px;
  top: 0;
  bottom: 0;
  transform: scaleY(0);
}

.bottom {
  bottom: 0;
  transform-origin: bottom right;
}

input:focus ~ .bottom {
  transform-origin: bottom left;
  transform: scaleX(1);
}

.search-right {
  right: 0;
  transform-origin: top right;
}

input:focus ~ .search-right {
  transform-origin: bottom right;
  transform: scaleY(1);
}

.top {
  top: 0;
  transform-origin: top left;
}

input:focus ~ .top {
  transform-origin: top right;
  transform: scaleX(1);
}

.search-left {
  left: 0;
  transform-origin: bottom left;
}

input:focus ~ .search-left {
  transform-origin: top left;
  transform: scaleY(1);
}
</style>